<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<script src="prototype.js"
	type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script charset="utf-8" id="injection_graph_func"
	src="injection_graph_func.js"></script>
</head>
<body>

<div onmouseup="alert((slider1.value*100).toFixed()); return false;" id="track1"
	style="width: 200px; background-color: rgb(204, 204, 204); height: 10px;">
<div class="selected" id="handle1"
	style="width: 10px; height: 15px; background-color: rgb(255, 0, 0); cursor: move; left: 128px; position: relative;"></div>
</div>
<p id="debug1">changed: 67</p>

<form name="form" method="post" action="/" id="slider-form"
	onsubmit="alert(Form.serialize($('slider-form'))); return false;">
<input id="slider-value" name="slider-value" value="0"
	onkeyup="setSliderValue(slider1, this.value);" type="text"><input
	name="submit" value="Submit Data" type="submit"></form>


<script type="text/javascript" language="javascript">
		// <![CDATA[
		
			// horizontal slider control
			var slider1 = new Control.Slider('handle1', 'track1', {
				onSlide: function(v) { $('debug1').innerHTML = 'slide: ' + (v*100).toFixed(); $('slider-value').value = (v*100).toFixed(); },
				onChange: function(v){ $('debug1').innerHTML = 'changed: ' + (v*100).toFixed(); $('slider-value').value = (v*100).toFixed(); }
			});
			
			function setSliderValue(slider, value) {
				// due to onChange code above we need this or 
				// a 0 will be put in the text box when you delete the value
				if (value == '') return;
				
				if (isNaN(value))
					slider.setValue(0);
				else
					slider.setValue(value/100);
			}
		
		// ]]>
		</script>

</body>
</html>
